<template>
    <div class="box">
        <div class="content-info">
            <h3>用户登录</h3>
            <div>
                <el-form status-icon label-width="70px"  class="demo-ruleForm" >
                    <el-form-item label="登录账号" prop="pass">
                        <el-input type="text" v-model="users.account" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="checkPass">
                        <el-input type="password" v-model="users.password"  autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"  @click="login" >登录</el-button>
                        <router-link to="/register">没有账号？去注册</router-link>
                    </el-form-item>
                </el-form>
                
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    
    data() {
        return {
            users: {
                account: 'zhangsan',
                password: '123456'
            },
        };
    },
    methods: {
        async login() {
            const { data } = await axios({
                url: "/admin/login",
                method: "POST",
                data: this.users,
            });
            if (data.code) {
                this.$message({
                    message: "恭喜你，登陆成功",
                    type: "success",
                });
                //保存token在本地存储
                localStorage.token = data.token;
                this.$router.push("/");
            }
        },
    },
};
</script>

<style scoped lang="scss">
a {
    text-decoration: none;
    color: #337ab7;
}
.box {
    width: 100%;
    height: 100vh;
    position: relative;
    background-image: linear-gradient(45deg ,#98bde2 40% ,  #7db4ec 55%);
}
.content-info {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 150px;
    left: 600px;
    border: 1px solid rgb(163, 157, 157);
    border-radius: 5px;
    overflow: hidden;
     background-color: #b7d8f3;
}

.content-info > h3 {
    font-weight: normal;
    line-height: 40px;
   
    font-size: 14px;
    padding: 0 20px;
    border-bottom: 1px solid #ddd;
}

.content-info > div {
    padding:40px;
}
.el-button{
     background-color: rgb(238, 220, 238);
    border-color: rgb(238, 220, 238);
    margin-right: 20px;
    &:hover {
        background-color: rgb(238, 207, 238);
        border-color: rgb(238, 207, 238);
    }
}
</style>